<template>
  <div>
    <banner />
    <div class="container">
      <div class="row">
        <div class="col-md-2 col-sm-12" style="">
          <div class="pl-4 pt-2 pb-2 aboutselect">{{ asyncData[0].title }}</div>
          <ul style="margin-top: 10px; background-color: #dcdddd">
            <template v-for="(item, index) in asyncData">
              <li
                v-if="item.Pid"
                :key="item.id"
                class="pl-4 pt-2 pb-2"
                :class="{ aboutselect: id == index }"
                @click="change = '' + index"
              >
                <div>
                  {{ item.title }}
                </div>
              </li>
            </template>
          </ul>
        </div>
        <div class="col-md-10">
          <div class="content1">
            <div
              class="content2"
              style="min-height: 300px"
              v-if="asyncData[id].item[0]?.type == 1"
              v-html="asyncData[id].item[0]?.content || '控'"
            ></div>
            <div
              class="flexspacearound"
              style=""
              v-else-if="asyncData[id].item[0]?.type == 2"
            >
              <peoplecard
                v-for="item in asyncData[id].item"
                :key="item.id"
                :detail="item"
                :style="{ order:`${item.sort}` }"
              />
            </div>
            <div
              v-else-if="
                asyncData[id].item[0] && asyncData[id].item[0][0]?.type == 3
              "
            >
              <div style="overflow: hidden">
                <b-card-group deck>
                  <newcard
                    v-for="detial in asyncData[id].item[0]"
                    :detial="detial"
                    :parent="asyncData[id]"
                    :pid="id"
                    :key="detial.id"
                  />
                </b-card-group>
              </div>
              <div class="overflow-auto">
                <div class="mt-3">
                  <b-pagination-nav
                    @change="change2"
                    v-model="$route.query.page"
                    :number-of-pages="parseInt(asyncData[id].item[1] / 10 + 1)"
                    base-url="#"
                    align="center"
                  ></b-pagination-nav>
                </div>
              </div>
            </div>
            <div v-else-if="asyncData[id].item[0].type == 3">
              <!-- {{ asyncData[id].item }} -->
         
              <b-card-group deck>
                <newcard
                  v-for="detial in asyncData[id].item"
                  :detial="detial"
                  :parent="asyncData[id]"
                  :pid="id"
                  :key="detial.id"
                />
              </b-card-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'blog',
  data() {
    return {
      content: [],
      change: null,
    }
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
    $axios,
  }) {
    const model1 = route.params.id
    // 获取所有数据

    let { page, pagesize } = query
    const { data } = await $axios.post('/api/getmodel', {
      id: model1,
      page,
      pagesize,
    })
    console.log('result', data)
    return {
      asyncData: data.data,
    }
  },
  created() {},
  computed: {
    id: {
      get() {
        return this.change || this.$route.query.id || 0 // 123
      },
    },
  },
  methods: {
    async change2(val) {
      console.log(val)
      // this.$route.query.page = val
      console.log(this.$route)
      this.$router.push({
        path: this.$route.path,
        query: { id: this.id, page: val, pagsize: 10 },
      })

      console.log('sendapi')
      let res = await this.$axios.post('/api/getmodel', {
        id: this.$route.params.id,
        page: val,
        pagesize: 10,
      })
      console.log(res)

      console.log(res.data.data[this.id].item)
      this.asyncData[this.id].item = res.data.data[this.id].item
      // location.href = this.$route.path+"?id="+this.id+ "&page="+val+"&pagsize="+10
    },
  },
}
</script>

<style scoped>
.aboutselect {
  background-color: #66bd29;
  color: #fff;
}
ul .aboutleft div {
  height: 40px;
  border-bottom: 1px solid #fff;
}
.content2 {
  overflow: hidden;
  text-align: center;
}
::v-deep .content2 img {
  max-width: 100% !important;
}
::v-deep .content2 p img {
  max-width: 100% !important;
}
.flexspacearound {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
